<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <c:if test="${empty admin}">
        <%--非法访问--%>
        <c:redirect url="${APP_PATH}/adminLogin"/>
    </c:if>
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">


</head>
<body>

<jsp:include page="${APP_PATH}/common/admin/head-user.jsp"/>

<div class="col-sm-12 col-md-12 col-lg-9" style="margin-left: auto;margin-right: auto;">
    <div class="my-3 p-4 bg-white rounded">
        <h5 class="border-bottom border-gray pb-2 mb-0"><i class="fa fa-user"></i>所有用户
        </h5>
        <div id="userList">

        </div>

    </div>
    <%--分页导航栏，--%>
    <div id="page_nav_area"></div>
</div>
<div class="p-4"></div>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>

<script>
    //创建分页条
    function pageNav(result) {
        //page_nav_area
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");
        //遍历给ul中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
            var numLi = $("<li class='page-item'></li>").append($("<a class='btn btn-sm btn-outline-primary mr-2'></a>").append(item));
            if(result.extend.pageInfo.pageNum === item){
                //当前页按钮，不可点击
                numLi.find("a").removeClass("btn-outline-primary");
                numLi.find("a").addClass("disabled");
                numLi.find("a").addClass("btn-primary");
            }
            numLi.click(function(){
                toPage(item);
            });
            ul.append(numLi);
        });
        ul.appendTo($("#page_nav_area"));
    }

    //根据返回的json数据，构建分页数据
    function buildPage(result) {
        var $userList = $("#userList");
        $userList.empty();
        $.each(result.extend.pageInfo.list, function (index, item) {
            var $div_media = $("<div class='media text-muted pt-3'>");
            var $img = $("<img src='"+item.headimgurl+"' style='object-fit: cover' data-holder-rendered='true' width='40px' height='40px'>");
            var $p = $("<p class='media-body ml-3 pb-3 mb-0 small lh-125 border-bottom border-gray'>");
            var $strong = $("<strong class='d-block text-gray-dark text-lg-left'>@"+item.nickname+"</strong>");
            $div_media.append($img).append($p.append($strong).append(item.slogan)).appendTo($userList);
        })
    }

    //获取指定页面的公告数据
    function toPage(pn) {
        $.ajax({
            url: "/adminGetUsers/" + pn,
            method: 'GET',
            success: function (result) {
                if (result.code === 100) {
                    //返回数据成功，开始构建页面
                    //判断该页数据是否为空
                    if (result.extend.pageInfo.list.length > 0) {
                        buildPage(result);
                    }
                    //分页条
                    pageNav(result);
                } else {
                    //获取信息失败,弹出提示
                    toastr.error("获取用户信息失败，请稍后重试！！");
                }
            }
        })
    }

    //默认显示第一页数据
    $(function () {
        toPage(1);
    })
</script>

</body>

</html>
